<template>
  <view>
    <s-custom-navbar
      :title="navbarTitle"
      :bgStyles="navbarBg"
      :menuStyles="menuStyles"
      :toolbarStyles="toolbarStyles"
    >
      <template #center>
        <view class="ss-flex">
          <view
            class="detail-navbar-menu-item ss-flex-1 ss-flex ss-col-center ss-row-center"
            :class="{ 'detail-navbar-menu-active': state.tabMaps[0].value }"
            @tap="onTab(0)"
          >
            <text class="menu-title">教练</text>
          </view>
          <view
            class="detail-navbar-menu-item ss-flex-1 ss-flex ss-col-center ss-row-center"
            :class="{ 'detail-navbar-menu-active': state.tabMaps[1].value }"
            @tap="onTab(1)"
          >
            <text class="menu-title">详情</text>
          </view>
          <view
            class="detail-navbar-menu-item ss-flex-1 ss-flex ss-col-center ss-row-center"
            :class="{ 'detail-navbar-menu-active': state.tabMaps[2].value }"
            @tap="onTab(2)"
          >
            <text class="menu-title">评价</text>
          </view>
        </view>
      </template>
    </s-custom-navbar>
  </view>
</template>

<script setup>
  import { reactive, computed, nextTick } from 'vue';
  import { onPageScroll } from '@dcloudio/uni-app';
  import sheep from '@/sheep';

  const state = reactive({
    tabMaps: [
      {
        name: 'coach',
        value: true,
      },
      {
        name: 'detail',
        value: false,
      },
      {
        name: 'comment',
        value: false,
      },
    ],
    navbar: {
      title: '教练详情',
      opacity: 0,
    },
  });

  const navbarTitle = computed(() => {
    if (state.navbar.opacity === 0) return '';
    return state.navbar.title;
  });

  const navbarBg = computed(() => {
    return {
      background: `rgba(255, 255, 255, ${state.navbar.opacity})`,
    };
  });

  const menuStyles = computed(() => {
    return {
      color: state.navbar.opacity > 0.5 ? '#333' : '#fff',
    };
  });

  const toolbarStyles = computed(() => {
    return {
      color: state.navbar.opacity > 0.5 ? '#333' : '#fff',
    };
  });

  function onTab(index) {
    const tabMaps = ['coach-detail-container', 'detail-content-selector', 'detail-comment-selector'];
    state.tabMaps.forEach((item, i) => {
      item.value = i === index;
    });

    nextTick(() => {
      const query = uni.createSelectorQuery().in(getCurrentInstance());
      query
        .select(`.${tabMaps[index]}`)
        .boundingClientRect((data) => {
          if (data) {
            uni.pageScrollTo({
              scrollTop: data.top - 44,
              duration: 300,
            });
          }
        })
        .exec();
    });
  }

  onPageScroll((e) => {
    const scrollTop = e.scrollTop;
    const opacity = scrollTop > 100 ? 1 : scrollTop / 100;
    state.navbar.opacity = opacity;

    // 根据滚动位置更新tab状态
    const query = uni.createSelectorQuery().in(getCurrentInstance());
    query
      .selectAll('.coach-detail-container, .detail-content-selector, .detail-comment-selector')
      .boundingClientRect((data) => {
        if (data && data.length >= 3) {
          const currentScrollTop = scrollTop + 100;
          
          if (currentScrollTop < data[1].top) {
            // 在教练区域
            state.tabMaps.forEach((item, i) => {
              item.value = i === 0;
            });
          } else if (currentScrollTop < data[2].top) {
            // 在详情区域
            state.tabMaps.forEach((item, i) => {
              item.value = i === 1;
            });
          } else {
            // 在评价区域
            state.tabMaps.forEach((item, i) => {
              item.value = i === 2;
            });
          }
        }
      })
      .exec();
  });
</script>

<style lang="scss" scoped>
  .detail-navbar-menu-item {
    height: 80rpx;
    position: relative;

    .menu-title {
      font-size: 30rpx;
      font-weight: 500;
      transition: all 0.3s;
    }

    &.detail-navbar-menu-active {
      .menu-title {
        font-weight: 600;
        color: var(--ui-BG-Main);
      }

      &::after {
        content: '';
        width: 60rpx;
        height: 6rpx;
        background: var(--ui-BG-Main);
        position: absolute;
        bottom: 10rpx;
        left: 50%;
        transform: translateX(-50%);
        border-radius: 3rpx;
      }
    }
  }
</style>
